<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子和图片生成器</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    #main-container {
      display: flex;
      width: 700px;
      background-color: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    #container {
      flex: 1;
      margin-right: 20px;
    }

    #display-box {
      width: 100%;
      height: 300px;
      border: 2px dashed #ddd;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      border-radius: 10px;
      background-color: #fafafa;
      overflow: hidden;
    }

    label {
      display: block;
      margin-bottom: 10px;
      font-weight: bold;
    }

    input[type="number"],
    input[type="color"],
    input[type="file"],
    input[type="range"] {
      width: 100%;
      padding: 5px;
      margin-bottom: 15px;
      box-sizing: border-box;
    }

    input[type="file"] {
      padding: 3px;
    }

    button {
      width: 100%;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }

    button:hover {
      background-color: #45a049;
    }

    .range-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .range-container input[type="range"] {
      flex-grow: 1;
      margin-right: 10px;
    }

    .range-value {
      width: 40px;
      text-align: right;
    }

    #css-code-container {
      flex: 1;
      background-color: #333;
      padding: 20px;
      border-radius: 10px;
      border: 1px solid #ddd;
      font-family: "Courier New", Courier, monospace;
      font-size: 14px;
      color: #f8f8f2;
      position: relative;
    }

    #css-code-container code {
      display: block;
      background-color: #272822;
      padding: 10px;
      border-radius: 5px;
      margin-bottom: 10px;
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    #copy-button {
      width: 50%;
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 5px 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 12px;
    }

    #copy-button:hover {
      background-color: #45a049;
    }
  </style>
</head>

<body>

  <div id="main-container">
    <div id="container">
      <div id="display-box">预览内容在此显示</div>

      <label for="width">宽度（像素）:</label>
      <input type="number" id="width" placeholder="输入宽度">

      <label for="height">高度（像素）:</label>
      <input type="number" id="height" placeholder="输入高度">

      <label for="color">选择颜色（可选）:</label>
      <input type="color" id="color">

      <label for="gradient-color1">渐变色 - 颜色1:</label>
      <input type="color" id="gradient-color1">

      <label for="gradient-color2">渐变色 - 颜色2:</label>
      <input type="color" id="gradient-color2">

      <label for="image-upload">上传图片（可选）:</label>
      <input type="file" id="image-upload" accept="image/*">

      <label for="border-radius">边角弧度:</label>
      <div class="range-container">
        <input type="range" id="border-radius" min="0" max="100" value="0">
        <span id="border-radius-value" class="range-value">0</span>
      </div>

      <button id="save-button">保存为 JPG</button>
    </div>

    <div id="css-code-container">
      <h3>CSS 代码</h3>
      <button id="copy-button">复制代码</button>
      <code id="css-code">
                /* CSS 代码将在此处显示 */
            </code>
    </div>
  </div>

  <!-- 使用最新版html2canvas -->
  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
  <script>
      // coderkuddus foxmail: kudduss@foxmail.com  //此代码可以商业使用、但需要保留原作者名字、不得起诉！！！
    document.getElementById('image-upload').addEventListener('change', function (e) {
      const displayBox = document.getElementById('display-box');
      const colorInput = document.getElementById('color');
      displayBox.innerHTML = ''; // 清空之前的内容
      colorInput.value = ''; // 清空颜色选择

      const file = e.target.files[0];
      if (file) {
        const img = document.createElement('img');
        img.src = URL.createObjectURL(file);

        img.style.width = document.getElementById('width').value + 'px';
        img.style.height = document.getElementById('height').value + 'px';
        img.style.borderRadius = document.getElementById('border-radius').value + 'px';

        displayBox.appendChild(img);
        updateCSSCode(`img { width: ${img.style.width}; height: ${img.style.height}; border-radius: ${img.style.borderRadius}; }`);
      }
    });

    document.getElementById('color').addEventListener('input', function () {
      const displayBox = document.getElementById('display-box');
      const imageUpload = document.getElementById('image-upload');
      displayBox.innerHTML = ''; // 清空之前的内容
      imageUpload.value = ''; // 清空文件上传

      updateBox();
    });

    document.getElementById('width').addEventListener('input', updateBox);
    document.getElementById('height').addEventListener('input', updateBox);
    document.getElementById('border-radius').addEventListener('input', updateBorderRadius);
    document.getElementById('gradient-color1').addEventListener('input', updateGradient);
    document.getElementById('gradient-color2').addEventListener('input', updateGradient);

    function updateBox() {
      const displayBox = document.getElementById('display-box');
      const width = document.getElementById('width').value;
      const height = document.getElementById('height').value;
      const color = document.getElementById('color').value;

      if (color) {
        displayBox.innerHTML = ''; // 清空之前的内容

        const box = document.createElement('div');
        box.className = 'generated-box';
        box.style.width = width + 'px';
        box.style.height = height + 'px';
        box.style.backgroundColor = color;
        box.style.borderRadius = document.getElementById('border-radius').value + 'px';

        displayBox.appendChild(box);
        updateCSSCode(`.generated-box { width: ${box.style.width}; height: ${box.style.height}; background-color: ${color}; border-radius: ${box.style.borderRadius}; }`);
      }
    }

    function updateGradient() {
      const color1 = document.getElementById('gradient-color1').value;
      const color2 = document.getElementById('gradient-color2').value;
      const displayBox = document.getElementById('display-box');
      const width = document.getElementById('width').value;
      const height = document.getElementById('height').value;
      const borderRadius = document.getElementById('border-radius').value;

      if (color1 && color2) {
        displayBox.innerHTML = ''; // 清空之前的内容

        const gradientBox = document.createElement('div');
        gradientBox.className = 'generated-box';
        gradientBox.style.width = width + 'px';
        gradientBox.style.height = height + 'px';
        gradientBox.style.backgroundImage = `linear-gradient(${color1}, ${color2})`;
        gradientBox.style.borderRadius = borderRadius + 'px';

        displayBox.appendChild(gradientBox);
        updateCSSCode(`.generated-box { width: ${width}px; height: ${height}px; background-image: linear-gradient(${color1}, ${color2}); border-radius: ${borderRadius}px; }`);
      }
    }

    function updateBorderRadius() {
      const displayBox = document.getElementById('display-box');
      const borderRadius = document.getElementById('border-radius').value;
      document.getElementById('border-radius-value').textContent = borderRadius;

      const content = displayBox.firstChild;
      if (content) {
        content.style.borderRadius = borderRadius + 'px';
        updateCSSCode(content.tagName.toLowerCase() + ` { width: ${content.style.width}; height: ${content.style.height}; border-radius: ${borderRadius}px; ${content.style.backgroundImage ? 'background-image: ' + content.style.backgroundImage + ';' : ''} }`);
      }
    }

    function updateCSSCode(code) {
      document.getElementById('css-code').textContent = code;
    }

    document.getElementById('copy-button').addEventListener('click', function () {
      const cssCode = document.getElementById('css-code').textContent;
      navigator.clipboard.writeText(cssCode).then(() => {
        alert('CSS 代码已复制到剪贴板！');
      }, () => {
        alert('复制失败，请手动复制。');
      });
    });

    document.getElementById('save-button').addEventListener('click', function () {
      const displayBox = document.getElementById('display-box');
      const content = displayBox.firstChild;

      if (content) {
        html2canvas(displayBox).then(canvas => {
          const link = document.createElement('a');
          link.href = canvas.toDataURL('image/jpeg');
          link.download = '生成的内容.jpg';
          link.click();
        });
      }
    });
  </script>
</body>

</html>